<template>
  <div>
    <div class="action">
      <n-space>
        <n-button ghost @click="handleComputWork" type="primary" size="small">
          <template #icon>
            <n-icon>
              <Folder></Folder>
            </n-icon>
          </template>
          新增目录
        </n-button>
        <n-button ghost @click="handleAddAnalysis" type="primary" size="small">
          <template #icon>
            <n-icon>
              <FileTrayFullOutline></FileTrayFullOutline>
            </n-icon>
          </template>
          新增分析
          {{messageText}}
        </n-button>
      </n-space>
    </div>
    <div class="inputSearch">
      <n-input v-model:value="pattern" round placeholder="搜索">
        <template #suffix>
          <n-icon :component="FlashOutline" />
        </template>
      </n-input>
    </div>

    <div class="treebox">
      <n-tree
        block-line
        :expanded-keys="navStore.getdefaultExpandedKeys"
        :selected-keys="navStore.getdefaultSelectedKeys"
        :data="data"
        :pattern="pattern"
        expand-on-click
        :node-props="nodeProps"
        :on-update:expanded-keys="updatePrefixWithExpaned"
        :on-update:selected-keys="updatePrefixWithSelected"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import { useMessage, NIcon, TreeOption } from 'naive-ui'
import { FlashOutline } from '@vicons/ionicons5'
import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5'
const message = useMessage()
import { PageEnum } from '@/enums/pageEnum'
import { useNavStore } from '../../store/useNavStore'
import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'
const navStore = useNavStore()
const pattern = ref('')
const data = ref([
  {
    key: '业务主题',
    label: '业务主题',
    prefix: () =>
      h(NIcon, null, {
        default: () => h(Folder)
      }),
    children: [
      {
        key: '销售管理',
        pid: '业务主题',
        label: '销售管理',

        prefix: () =>
          h(NIcon, null, {
            default: () => h(Folder)
          })
      },
      {
        key: '人事管理',
        label: '人事管理',
        pid: '业务主题',
        prefix: () =>
          h(NIcon, null, {
            default: () => h(Folder)
          }),
        children: [
          {
            label: '人员分布.vst',
            key: '人员分布.vst',
            pid: '人事管理',
            prefix: () =>
              h(NIcon, null, {
                default: () => h(FileTrayFullOutline)
              })
          }
        ]
      }
    ]
  }
])
const worker = new Worker('/src/Work/Work.js');
worker.onmessage = e => {
  const message = e.data;
  console.log(`[From Worker]: ${message}`);
 messageText.value = message;
};
const handleComputWork = () =>{

worker.postMessage('写的真好!');
}
const updatePrefixWithSelected = (
  _keys: Array<string | number>,
  _option: Array<TreeOption | null>,
  meta: {
    node: TreeOption | null
    action: 'expand' | 'collapse' | 'filter'
  }
) => {
  console.log('_option :>> ', _keys, _option, meta)
  if (_option.length > 0) {
    let selected: any = _option[_option.length - 1]
    navStore.setdefaultSelectedKeys([selected.key])
  }
}
const updatePrefixWithExpaned = (
  _keys: Array<string | number>,
  _option: Array<TreeOption | null>,
  meta: {
    node: TreeOption | null
    action: 'expand' | 'collapse' | 'filter'
  }
) => {
  let data = _option.map((res: any) => res.key)
  let resData = data.reverse()
  navStore.setdefaultExpandedKeys(resData)
  navStore.setdataAnalysisNavigation(_option)
  if (!meta.node) return
  switch (meta.action) {
    case 'expand':
      meta.node.prefix = () =>
        h(NIcon, null, {
          default: () => h(FolderOpenOutline)
        })
      break
    case 'collapse':
      meta.node.prefix = () =>
        h(NIcon, null, {
          default: () => h(Folder)
        })
      break
  }
}
const handleAddAnalysis = () => {

  const id = getUUID()
  const path = fetchPathByName(PageEnum.BI_Analysis_NAME, 'href')
  routerTurnByPath(path, [id], undefined, true)
}
const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    onClick() {
      if (!option.children && !option.disabled) {
        message.info('[Click] ' + option.label)
        navStore.setdefaultSelectedKeys([option.key])

        //  写入右侧面包屑
        //
      }
    }
  }
}

const messageText = ref("")

</script>

<style lang="scss" scoped>
.action {
  margin: 10px 10px 0;
}
.inputSearch {
  margin: 10px 10px 0;
}
.treebox {
  margin-top: 10px;
}
</style>
